import React, { useState, useLayoutEffect } from "react";

// useLayoutEffect的作用和useEffect的作用几乎是一样的

// useLayoutEffect 与 useEffect的区别：
// - `useEffect` 是异步执行的，而`useLayoutEffect`是同步执行的。
// - `useEffect` 的执行时机是浏览器完成渲染之后，而 `useLayoutEffect` 的执行时机是浏览器把内容真正渲染到界面之前

// 官方推荐一律使用useEffect，不会占据主线程，不太会使页面卡顿
// 当进入页面，有变量要控制css样式的时候，需要用到useLayoutEffect，可以解决页面闪烁的问题

const App = () => {
  const [width, setWidth] = useState(200);
  useLayoutEffect(() => {
    setWidth(500);
  }, []);
  return (
    <>
      <h2>useLayoutEffect</h2>
      <div
        style={{
          width: width,
          height: 200,
          background: "red",
        }}
      ></div>
    </>
  );
};

export default App;
